<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提前视频关键帧</title>
</head>
<body>
<!--

-->
<input type="file">

<script>

    const input = document.querySelector('input');

    input.onchange = async function (e) {
        const file = e.target.files[0];
      for (let i = 0; i < 10; i++) {
          const {url,blob } = await  captureFrame(file, i);
          const img = document.createElement('img');
          img.src = url;
          document.body.appendChild(img);
      }
    }

    // 文件、截取的关键帧时间
    function captureFrame(file, time) {
        return  new Promise((resolve)=>{
            const vdo = document.createElement('video');
            vdo.autoplay = true;
            vdo.muted = true;
            vdo.currentTime = time;
            vdo.src = URL.createObjectURL(file);
            vdo.addEventListener('canplay', function () {
                const canvas = document.createElement('canvas');
                canvas.width = vdo.videoWidth;
                canvas.height = vdo.videoHeight;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(vdo, 0, 0, canvas.width, canvas.height);
                // document.body.appendChild(canvas);
                canvas.toBlob((blob) => {
                    const url = URL.createObjectURL(blob);
                    resolve({url, blob});
                })
            });
        })
    }
</script>
</body>
</html>